<template>
    <div class="header">
        <div class="top">
            <div class="wrapper">
                <ul class="top_list">
                    <li>
                        <a v-if='user' @click='goSelf' >{{username}}</a>
                        <a v-else @click='goLogin'>请先登录</a>
                    </li>
                    <li><a @click='goLogin'>退出登录</a></li>
                    <li><a @click='goDing'>我的订单</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">手机版</a></li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="wrapper">
                <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" class="logo" alt="">
                <ul class="nav">
                    <li><a @click="toHome">首页</a></li>
                    <li v-for="item in navList" :key="item.id"><a href="#" @click = "tmwl(item)">{{item.name}}</a>
                        <ol>
                            <li v-for="itemx in item.children" :key="itemx.id" @click="clickMenu(itemx.id)"><a href="#">
                                <img :src="itemx.picture" alt="">
                                <span>{{itemx.name}}</span></a></li>
                        </ol>
                    </li>
                    <li>
                        <div class="sgw">
                            <el-input placeholder="请输入内容" v-model="input1" class="search">
                                <template slot="prepend"><el-button slot="append" icon="el-icon-search"></el-button></template>
                            </el-input>
                            <i @click="tiao" class="el-icon-shopping-cart-2"></i>    
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"HomeHeader",
    data(){
        return {
            navList:[],
            input1:"",
            username:'',
            user:false
        }
    },
    async created(){
        if(localStorage.getItem('user')){
            const username=localStorage.getItem('user');
            this.user=true;
            this.username=username;
        }
        const res=await this.$http.homeApi();
        this.navList=res.data.result.categoryBanners;
    },
    methods:{
        clickMenu(id){
            this.$router.push({path:"/menu"})
            this.$bus.$emit('sss',id)
        },
        tiao(){
            this.$router.push("/shop")
        },
        // 跳转登录页
        goLogin(){
            if(localStorage.getItem('user')){
                localStorage.removeItem('user');
            }
            this.$router.push("/login");
        },
        // 跳转我的页面
        goSelf(){
            this.$router.push("/Fskl");
        },
        tmwl(e) {
            this.$router.push({
                path:"/TmWl",
                query:{
                    list:e
                }
            })
            
        },
        // 跳转订单页
        goDing(){
            this.$router.push("/RtSv");
        },
        // 跳转首页
        toHome(){
            this.$router.push("/home");
        }
    },

}
</script>

<style lang="less" scoped>
.clearFloat:after{
	display:block;
	content:"";
	clear:both;
}
.header{
    width:100vw;
    height:171px;
    .wrapper{
        padding:0 250px;
    }
    .top{
        height:50px;
        background:#333;
        color:#fff;
        .top_list{
            list-style:none;
            display:flex;
            float:right;
            li{
                list-style:none;
                a{
                    text-decoration: none;
                    color:#cdcdcd;
                    padding:0 10px;
                    border-right:1px solid #666;
                    font-size:14px;
                }
                &:last-child a{
                    border-right:0;
                }
            }
            li:hover a{
                color:#27bb9a;
            }
        }
    }
    .bottom{
        width:100%;
        height:120px;
        line-height:120px;
        background:#fff;
        position:sticky;
        left:0;
        z-index:10;
        display:flex;
        justify-content: flex-start;
        .wrapper{
            padding:0 250px;
        }
        .logo{
            width:250px;
            height:100px;
            float:left;
            // margin-top:20px;
        }
        .nav{
            // width:calc(100% - 250px);
            display:flex;
            justify-content: space-between;
            li{
                list-style:none;
                width:82px;
                z-index:20;
                a{
                    text-decoration:none;
                    color:#333;
                    font-size:18px;
                    margin:0 10px;
                }
                ol{
                    list-style:none;
                    width:1180px;
                    height:120px;
                    background:#fff;
                    border:1px solid #ccc;
                    border-bottom:0;
                    position:absolute;
                    left:250px;
                    top:120px;
                    z-index:200;
                    display:none;
                    li{
                        float:left;
                        text-align:center;
                        a{
                            color:#000;
                            font-size:13px;
                            img{
                                width:80px;
                                height:80px;
                                margin-top:10px;
                            }
                            span{
                                display:block;
                                margin-top:-100px;
                            }
                        }
                    }
                    li:hover a{
                        border-bottom:0;
                    }
                }
            }
            li:hover > a{
                color:#27bb9a;
                border-bottom:1px solid #27bb9a;
            }
            li:hover ol{
                display:block;
            }
		}
        .sgw{
            width:250px;
            .search{
                width:200px; 
                border:0;
                border-bottom:1px solid #eee;
                .el-button{
                    background: #fff;
                    width:30px;
                }
            }
            i{
                font-size:30px;
                margin-left:10px;
            }
        }
        
    }
}
</style>